<template>
  <div class="unsupported-device">
    <h1>设备不支持</h1>
    <p>很抱歉，当前平台仅支持在电脑端访问。</p>
    <p>为了确保您获得最佳的性能和完整的操作体验。</p>
    <p>请使用电脑访问本平台。谢谢！</p>
    <el-button type="primary" @click="handleLogout">点此退出登录</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const isPC = () => {
  const userAgent = navigator.userAgent
  const agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
  return !agents.some(agent => userAgent.includes(agent))
}

onMounted(() => {
  if (isPC()) {
    router.push('/')
  }
})

const handleLogout = () => {
  localStorage.clear()
  router.push('/login')
}
</script>

<style scoped>
.unsupported-device {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
}
</style>
